import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import SlideVerify, { type SlideVerifyInstance } from 'vue3-slide-verify'

import 'vue3-slide-verify/dist/style.css'
import toNative from '@/utils/toNative'
import { CloseOutlined } from '@ant-design/icons-vue'

@Component
export class SliderVerifyComponent extends Render {
    imgList = [
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/19.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/20.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/21.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/22.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/23.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/24.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/880.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/881.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/882.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/883.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/884.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/885.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/886.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/887.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/888.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/899.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/890.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/891.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/892.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/893.png',
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/894.png'
    ]

    msg = ''
    block: SlideVerifyInstance | null = null

    flag = true
    show = false

    @Prop() modelValue?: boolean

    @Emit('verified')
    handleVerifySuccess(result: boolean) {
        return result
    }

    @Emit('update:modelValue')
    handleModelValueChange(val: boolean) {
        return val
    }

    @Emit('close')
    onClose() {}

    onAgain() {
        this.msg = '检测到非人为操作的哦！请重新验证'
        this.block?.refresh()
    }

    onSuccess(time: number) {
        this.msg = `验证成功， 耗时${(time / 1000).toFixed(1)}s`
        this.flag = true
        this.handleVerifySuccess(true)
        this.onClose()
    }

    onFail() {
        this.msg = '验证不通过,请重试'
        this.flag = false
        console.log(4567)
    }

    onRefresh() {
        this.msg = '点击了刷新小图标'
    }

    render() {
        return (
            <div class="w-400px h-300px flex flex-col justify-center items-center bg-white mx-auto">
                <div class="flex justify-end w-full">
                    <div class="cursor-pointer" onClick={this.onClose}>
                        <CloseOutlined class="w-24"/>
                    </div>
                </div>
                <SlideVerify
                    ref="block"
                    slider-text="向右滑动->"
                    accuracy={3}
                    imgs={this.imgList}
                    onAgain={this.onAgain}
                    onSuccess={this.onSuccess}
                    onFail={this.onFail}
                    onRefresh={this.onRefresh}
                />
                <div class={`${this.flag ? 'text-blue' : 'text-red'} mt-20px`}>{this.msg}</div>
            </div>
        )
    }
}

export default toNative<{}, { close: () => void, verified: () => boolean }>(SliderVerifyComponent)
